<template>
  <div class="multi_exec">
    <!-- 展示用户已选择的主机 -->
    <div>
      <h3>执行主机：</h3>
      <div>
        <a-tag closable @close="log(info_index)" v-for="(info,info_index) in show_host_info" :key="info.id">
          {{`${info.hostname}(${info.ip_addr}:${info.port})`}}
        </a-tag>
      </div>
    </div>

    <!--按钮，选择主机-->
    <div style="margin-top: 10px;">
      <a-button @click="showModel" icon="plus">从主机列表中选择</a-button>
      <div>
        <div>执行指令</div>
        <editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="500" height="100"></editor>
      </div>
      <!--命令输入框 富文本-->
      <div>
        <div>执行指令：</div>
        <editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="500" height="100"></editor>
      </div>
      <div>
        <a-button type="primary" @click="exec_cmd">开始执行</a-button>
      </div>

      <!--对话弹框-->
      <a-modal v-model="visible" title="选择执行主机" @ok="handleOk" width="960px">
        <!--对话框 第一行-->
        <div>
          <a-row>
            <!--选择主机类别-->
            <a-col :span="8">
              <a-form-item label="主机类别：" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
                <!--<a-select style="width: 160px;" placeholder="请选择" @change="handleSelectChange" v-model="host_form.form.category">-->
                <a-select style="width: 160px;" placeholder="请选择" v-model="host_form.form.category">
                  <a-select-option :value="value.id" v-for="(value, index) in categorys" :key="value.id">
                    {{value.name}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!--主机搜索框-->
            <a-col :span="8">
              <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol"
                label="主机别名：">
                <a-input placeholder="请输入"/>
              </a-form-item>
            </a-col>
            <!--主机已选择数量按钮-->
            <a-col :span="4">
              <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="已选：">
                <span style="margin-left: 8px">
                  <!--计算属性computed hasSelected 如果hasSelected为真即>0 则显示已选择主机数量-->
                  <template v-if="hasSelected">
                    {{ `${selectedRowKeys.length}` }}
                  </template>
                </span>
              </a-form-item>
            </a-col>
            <!--刷新按钮-->
            <a-col :span="4">
              <a-button type="primary" icon="sync" style="margin-top: 3px;">刷新</a-button>
            </a-col>
          </a-row>
        </div>

        <!--对话框主体 显示主机列表-->
        <div>
          <a-table :columns="columns" :data-source="data" :pagination="false" :rowKey="record => record.id"
                   :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
          </a-table>
        </div>
      </a-modal>
    </div>

  </div>
</template>



<script>
  // 主机别名的css配置
  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 14},
  };
  const columns = [
    {
      // title: '操作',
      // key: 'action',
      // width: 10,
      slots: {title: 'customTitle'},

      scopedSlots: {customRender: 'action'},
    },

    // {
    //   title: 'id',
    //   dataIndex: 'id',
    //   key: 'id',
    //
    //
    // },
    {
      title: '类别',
      dataIndex: 'category_name',
      key: 'category_name',


    },
    {
      title: '主机名称',
      dataIndex: 'hostname',
      key: 'hostname',
      // sorter: true,

    },
    {
      title: '连接地址',
      dataIndex: 'ip_addr',
      key: 'ip_addr',
      // ellipsis: true,
      // sorter: true,
      width: 200,
    },
    {
      title: '端口',
      dataIndex: 'port',
      key: 'port',
      // ellipsis: true,
    },
    {
      title: '备注信息',
      dataIndex: 'desc',
      key: 'desc',
      // ellipsis: true,
    },


  ];

  export default {
    name: "MultiExec",
    data(){
      return {
        formItemLayout,  // 主机别名的css配置 用于做珊格布局
        selectedRowKeys: [], // 已选择的主机
        columns,
        data: [],  // 所有的后台主机列表数据
        // 选择主机对话框
        visible: false,
        categorys: [
          {id: 0, name: ''}, // 默认没有选中任何值
        ],
        host_form: {
          form: {
            category: 1,
          }
        },

        // 显示选中的所有主机内容 [{'hostname':'web01','ip_addr':'10.0..'...}]
        show_host_info: [],
        selected_host_ids: [], // 选中的主机id列表
      }
    },
    // 注册子组建，富文本
    components: {
        editor: require('vue2-ace-editor'),
    },
    created() {
      // 获取主机类别数据和主机数据
      this.get_host_category_list();
      this.get_host_list();
    },
		computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0;
      },
    },
    methods:{
      // 在展示用户已选择的主机tag，用于删除已选择的主机
      log(index){
        console.log(index)
      },

      // 对话框打开
      showModel(){
        this.visible = true
      },

      // 对话框确定后，获取所有主机数据 添加到数组show_host_info，之后把已选择主机显示在页面上
      handleOk(e) {
        // console.log(this.data,this.selectedRowKeys)
        this.data.forEach((v, k) => {
          if (this.selectedRowKeys.includes(v.id)) { // 判断某元素是否在数组中用includes
            this.show_host_info.push({
              id: v.id, hostname: v.hostname, ip_addr: v.ip_addr, port: v.port,
            })
            this.selected_host_ids.push(v.id);
          }
        })
        this.visible = false;
      },

      // 选中主机时触发的，selectedRowKeys被选中的主机id列表
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
      },

      // 获取主机信息
      get_host_list(url = null) {
        if (url) {
          this.$axios.get(url).then((res) => {
              this.data = res.data;
            })
        } else {
          this.$axios.get(`${this.$settings.HOST}/mtask/host/list/`).then((res) => {
              this.data = res.data;
            })
        }
      },
      // 获取主机类别
      get_host_category_list() {
        let token = this.$settings.check_login(this)
        this.$axios.get(`${this.$settings.HOST}/mtask/host/categorys/`, {
          headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': `jwt ${token}`
          },
        }).then((res) => {
            this.categorys = this.categorys.concat(res.data);
          })
      },

      // 执行命令，发送命令到后端
      exec_cmd(){
        this.$axios.post(`${this.$settings.HOST}/mtask/cmd_exec/`, {
          ids: this.selected_host_ids,
          cmd: this.content,
        }).then((res) => {
          console.log(res)
        })
      },

      // 富文本申明配置 命令输入框
      editorInit: function () {
            require('brace/ext/language_tools') //language extension prerequsite...
            require('brace/mode/html')
            require('brace/mode/javascript')    //language
            require('brace/mode/less')
            require('brace/theme/chrome')
            require('brace/snippets/javascript') //snippet
        }
    },
  }
</script>
